<template>
	<view class="add_recordns">


		<view class="add_rec" @click="goToNewPage">
			<view class="rec_top">
				<text @click.stop="(() => {value -= 1})"></text>
				<text>尿酸值</text>
				<text @click.stop="(() => {value += 1})"></text>
			</view>
			<view class="rec_con">
				<text v-if="value">{{value}}</text>
			</view>
			<view class="rec_con_dw">
				umol/L
			</view>
			<view class="rec_con_bc">
				滑动标尺记录尿酸值
			</view>
		</view>
		<view class="ruler" @click="goToStatis">
			<scroll-choose @scroll="scroll" :scrollStart="scrollStart" :scrollEnd="scrollEnd" :scrollLeft="scrollLeft" :maginL="maginL"></scroll-choose>

		</view>

		<!-- 测量时间 -->
		<view class="measuring_time" @click="setUpTime">
			<view class="measuring_fl">测量时间</view>
			<view class="measuring_fr">
				<text>{{addTime}}</text>
				<image class="measuring_fr_img" :src="require('../../status/image/arr.png')" mode=""></image>
			</view>
		</view>

		<!-- 时间段 -->
		<view class="blood_time">
			<view class="blood_time_item" @click="changeItem(index)" :class="index == currentBloodIndex? 'current_blood_item':''"
			 v-for="(item,index) in bloodTimeList" :key="index">{{item}}</view>
		</view>

		<!-- 状态 -->
		<view class="blood_state">
			<view class="blood_state_item" v-for="(v,i) in bloodStateList" :key="i" @click="changeBlood(i)">
				<image :src="v.img" mode=""></image>
				<text :class="currentBloodStateIndex == i? 'current_blood_state':''" style="display: block; margin: 10rpx 0;">{{v.text}}</text>
			</view>
		</view>
		<!-- 	<view class="rec_status">
			<text class="status_tit">痛风发作状况</text>
			<view class="status_con">

				<view class="status_con_item" v-for="(item,index) in goutList" :key="index" :class="currentStatusItem == index? 'show_status_item': ''"
				 @click="currentStatus(index,item.type)">
					<image class="status_con_img" :src="item.img" mode=""></image>
					<view style="line-height: 30rpx;">
						<text>{{item.text1}}</text> <br>
						<text>{{item.text2}}</text>
					</view>
				</view>

			</view>
		</view> -->

		<view class="rec_record">
			<text class="record_tit">服药记录</text>
			<textarea v-show="!showTime" class="textarea" v-model="mark" placeholder="请输入备注" />

			<view class="upload_img">
				<view class="img" @click="uploadImg" v-show="!drugsImgs">
					<u-icon class="u-icon" name="camera" color="#909399"  size="60"></u-icon> 
				</view>
				<view class="img_list" v-show="drugsImgs">
					<image :src="'https://xcx.shuizhisu.com/' + drugsImgs" mode=""></image>
					<u-icon class="close-circle" name="close-circle" color="#ff495e" size="40" @click="deleteImg"></u-icon> 
				</view>
			</view>
			<!-- <view class="record_foo">
				<text>清除语音</text>
				<text>按住 说话</text>
			</view> -->
			<!-- <image class="record_foo_img" :src="require('../../../status/image/addig.png')" mode=""></image> -->
			<!-- <u-upload :action="action" :file-list="fileList" ></u-upload> -->
		</view>
		<view class="rec_button">
			<text @click="previousPage">返回</text>
			<text @click="goToRecordnslist">保存</text>
		</view>
		<!-- 时间选择 -->
		<u-picker v-model="showTime" mode="time" @confirm="columnchange" :params="params"></u-picker> 
	</view>
</template>

<script>
	import scrollChoose from '@/components/scroll-choose/scroll-choose.vue' 
	export default {
		 components:{
		        scrollChoose,
		    },
		data() {
			return { 
				// 痛风发作情况
				goutList: [
					{img: require('../../status/image/sorry.png'),text1:'未发作',text2:'感觉不错',type:1},
					{img: require('../../status/image/sorry.png'),text1:'轻度疼痛',text2:'不影响生活',type:2},
					{img: require('../../status/image/sorry.png'),text1:'中度疼痛',text2:'影响生活',type:3},
					{img: require('../../status/image/sorry.png'),text1:'重度疼痛',text2:'卧床不起',type:4}, 
					], 
				 
				// 当前选中痛风发作情况
				currentStatusItem: -1,
				// 备注信息
				mark:'',
				// 时间
				addTime: '',
				// 上传的图片
				drugsImgs:'',
				// 发作情况
				type: '',
				// 时间段选择
				bloodTimeList:['空腹','午餐前','晚餐前','睡前','早餐后','午餐后','晚餐后','凌晨'],
				// 当前时间段高亮
				currentBloodIndex: -1, 
				// 状态
				bloodStateList:[
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/0.png', text: '无不适'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/8.png', text: '三多'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/3.png', text: '乏力'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/7.png', text: '呕吐'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/4.png', text: '呼吸快'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/12.png', text: '眼下陷'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/9.png', text: '头痛'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/5.png', text: '昏迷'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/1.png', text: '抽搐'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/2.png', text: '出汗'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/6.png', text: '饥饿'},
				  {img: 'https://xcx.shuizhisu.com/public/static/img/nav/11.png', text: '心悸'}, 
				],
				// 当前状态高亮
				currentBloodStateIndex: -1,
				// 尿酸值
				value: null,
				// 时间段
				timeType: null,
				  scrollLeftNow: 62,//页面显示
				  scrollLeft: 420,//初始值
				  scrollStart: 0,//滚动区域起始值
				  scrollEnd: 1500,//滚动区域终止值
				  maginL: 10,//线间距 
				  // 是否显示时间
				  showTime: false,
				  // 添加完成后跳转上一页
				  goToPreviousTime: null,
				  // 时间选择格式
				  params: {
				  					year: true,
				  					month: true,
				  					day: true,
				  					hour: true,
				  					minute: true,
				  					second: true
				  				},
				// 图片上传地址
				// action: 'xcx.shuizhisu.com/api/upload/imgBase64',
			};
		},
		onLoad(option) {
			this.getNowFormatDate() 
		},
		onHide() {
			clearTimeout(this.goToPreviousTime)
		},
		methods:{
			async beforeUpload(index){
				await console.log(index)
			},
			 getNowFormatDate() {
				let date = new Date();
				let seperator1 = "-";
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let strDate = date.getDate(); 
				let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let second =  date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				this.addTime = year + seperator1 + month + seperator1 + strDate + ' ' + hour + ':' + minute + ':' + second; 
			},
			goToNewPage(){
				uni.navigateTo({
					url: '../recordnslist/index'
				})
			},
			previousPage(){
				uni.redirectTo({
					url: '../index'
				})
			},
			goToRecordnslist(){ 
				let _this = this  
				if(_this.timeType == null){
					uni.showToast({
						title: '请选择时间段',
						icon: 'none'
					})
					return false
				}
				_this.$api.sendRequest({
					url: '/api/ua/rememberua',
					data: {
						time: _this.addTime,
						value: _this.value,
						mark: _this.mark,  
						// 时间段
						timeType: _this.timeType,
						// 状态
						type: _this.type,
						img: _this.drugsImgs
					},
					success: res => {  
						if(res.code >= 0){ 
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							clearTimeout(_this.goToPreviousTime)
							_this.goToPreviousTime = setTimeout(() => {
								uni.reLaunch({
									url: '../index'
								})
							},1000)
						}
					}
				}) 
			},
			goToStatis(){
				uni.redirectTo({
					url: '../statistics/index'
				})
			},
			 scroll(val){ 
				 this.value = val
			 },
			 // 选中痛风状况
			 currentStatus(index,type){  
				this.currentStatusItem = index
				this.type = type
			 }, 
			 // 选择时间
			 setUpTime(){
				 this.showTime = true
			 },
			 // 当前时间段高亮
			 changeItem(index){
			 				 this.timeType = index + 1
			 				 this.currentBloodIndex = index
			 },
			 //当前状态高亮
			 changeBlood(i){ 
			 				this.type = i + 1
			 				this.currentBloodStateIndex = i
			 },
			 columnchange(value){  
				 this.addTime = value.year + '-' + value.month + '-' + value.day + ' ' + value.hour + ':' + value.minute + ':' + value.second
			 },
			 // 上传图片
			 uploadImg(){
				 let that = this
				 uni.chooseImage({
				 	count: 1,
				 	sizeType: ['original', 'compressed'],
				 	sourceType: ['album', 'camera'],
				 	success(info) {
				 		uni.showLoading({
				 			title: '上传中'
				 		}) 
				 		uni.uploadFile({
				 			url: 'https://xcx.shuizhisu.com/api/uploadCompress/imgBase64',
				 			filePath: info.tempFilePaths[0], 
				 			name: 'file',
				 			header:{
				 				"Content-Type": "multipart/form-data", 
				 			},
				 			formData:{
				 				"token": uni.getStorageSync('token')? uni.getStorageSync('token'):''
				 			},
				 			success: (res) => {  
				 				uni.hideLoading()  
								let data = JSON.parse(res.data) 
								if(data.code >= 0){
									that.drugsImgs = data.data.pic_path
								}   
				 			}
				 		}) 
				 	}
				 })
			 },
			 // 图片转base64
			 // urlTobase64(url) {
			 // 	let that = this
				// uni.getFileSystemManager().readFile({
				//     filePath: url,
				//     encoding: 'base64',  
				// 	success: (r) => {   
				// 				that.$api.sendRequest({
				// 					url: 'api/health/upload',
				// 					data:{
				// 						images: 'data:image/jpg;base64,' + r.data
				// 					},
				// 					success: res => {
				// 						uni.hideLoading() 
				// 					   if(res.code >= 0){
				// 					      that.drugsImgs = res.data.img 
				// 					    } 
				// 					}
				// 				}) 
				// 		}
				//     }) 
				 
			 // },
			 // 删除图片
			 deleteImg(){
				 this.drugsImgs = ''
			 },
			 //转发
			 onShareAppMessage(res) { 
			 	return {
			 		path: '/page/recordns/addrecordns/index',
			 		title: '记录尿酸',
			 	}
			 },  
			 onShareTimeline(){ 
			 	return {
			 		path: '/page/recordns/addrecordns/index',
			 		title: '记录尿酸',
			 	}
			 },
		}
	}
</script>

<style lang="less">
.add_recordns{
	overflow-x: hidden; 
	padding-bottom: 100rpx;
	.add_rec{
		padding: 20rpx 200rpx;
		height: 420rpx;
		background-color: #01cc97;
		.rec_top{
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx; 
			& text:nth-child(1){
				position: relative;
				top: 50%;
				transform: translate(0,-50%);
				width: 50rpx;
				height: 50rpx;
				background-color: #fff;
				border-radius: 50%;
				&::before{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					content: '-';
					font-size: 40rpx;
					color: #01cb9b;
				}
			}
			& text:nth-child(2){
				flex: 1;
				color: #fff;
				text-align: center;
			}
			& text:nth-child(3){
				position: relative;
				top: 50%;
				transform: translate(0,-50%);
				width: 50rpx;
				height: 50rpx;
				background-color: #fff;
				border-radius: 50%;
				&::before{
					position: absolute;
					top: 44%;
					left: 50%;
					transform: translate(-50%,-50%);
					content: '+';
					font-size: 40rpx;
					color: #01cb9b;
				}
			}
			
		}
		.rec_con{
			margin: 20rpx 0;
			height: 160rpx;
			line-height: 160rpx;
			font-size: 60rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 10rpx;
		}
		.rec_con_dw{
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 36rpx;
			color: #fff;
		}
		.rec_con_bc{
			position: relative;
			top: -14rpx;
			right: 200rpx;
			width: 100vw;
			height: 80rpx;  
			line-height: 80rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
		}
	
	}
	.ruler{
		height: 160rpx; 
	}
	.blood_time{
		margin-top: 80rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 200rpx;
		background-color: #f8f8f8;
		.blood_time_item{ 
			margin-top: 10rpx;
			text-align: center;
			width: 23%;
			font-size: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}
		.current_blood_item{
			background-color: #ff8806;
			color: #fff;
		}
	}
	.blood_state{
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 300rpx;
		background-color: #fff;
		.blood_state_item{
			width: 15%;
			color: #bfbfbf;
			text-align: center; 
			image {
				display: block;  
				margin: 0 auto;
				width: 60rpx;
				height: 60rpx;
			}
		}
		.current_blood_state{
			color: #ff8806;
		}
	}
	.measuring_time{
		margin-top: 32rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx; 
		background-color: #fff;
		.measuring_fl{
			color: #8a8a8a;
			line-height: 100rpx;
		} 
		.measuring_fr{
			line-height: 100rpx;
			.measuring_fr_img{
				position: relative;
				top: -6rpx;
				margin-left: 10rpx;
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
			}
		}
	}
	
	.rec_status{ 
		margin-top: 30rpx;
		padding: 20rpx; 
		background-color: #fff;
		.status_tit{
			display: block;
			height: 80rpx;
			font-size: 32rpx;
		}
		.status_con{  
			display: flex;
			justify-content: space-between;
			// flex-wrap: wrap;
			height: 240rpx;
			.status_con_item{
				margin: 0 16rpx;
				// width: 140rpx;
				flex: 1;
				display: flex;
				text-align: center;
				flex-direction: column; 
				color: #999;
				.status_con_img{ 
					margin: 0 auto 20rpx auto;
					width: 80%;
					height: 100rpx;
				}
			} 
			.show_status_item{ 
				text {
						color: #01cc97;
				} 
				// background-color: #eee;
			}
		}
	}
	.rec_record{
		padding: 20rpx;
		background-color: #fff;
		.record_tit{
			display: block;
			height: 80rpx;
			font-size: 32rpx;
		}
		.textarea{
			padding: 10rpx;
			width: 100%;
			height: 200rpx;
			border-radius: 20rpx;
			border: 1rpx solid #eee;
		}
		.upload_img{ 
			padding: 20rpx 0; 
			.img{
				position: relative;
				width: 100rpx;
				height: 100rpx;
				border: 1rpx solid #999;
				border-radius: 10rpx;
				.u-icon{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
			}
			.img_list{
				position: relative;
				width: 100rpx;
				height: 100rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
				.close-circle{
					position: absolute;
					right: -20rpx;
					top: -20rpx;
				}
			}
		}
		.record_foo{
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			& text:nth-child(1){
				padding: 0 10rpx;
				border: 1rpx solid #eee;
				border-radius: 20rpx;
			}
			& text:nth-child(2){
				padding: 0 20rpx;
				font-size: 30rpx;
				border: 1rpx solid #eee;
				border-radius: 20rpx;
			}
		}
		.record_foo_img{
			width: 100rpx;
			height: 100rpx;
		}
		 
	}
	.rec_button{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		z-index: 1000;
		background-color: #fff;
		text { 
			background-color: #ff8806;
			color: #fff;
			border-radius: 10rpx;
		}
		& text:nth-child(1){
			margin: 0 40rpx 0 20rpx;
			width: 200rpx; 
		}
		& text:nth-child(2){
			margin-right: 20rpx;
			flex: 1;
		}
	}
	  
}
</style>
